<template>
  <div>
    <!-- 头部 -->
    <div class="Header">
      <RouterLink to="/" class="iconfont icon-shouye2 home"></RouterLink>
      <div class="fontSize">网易严选</div>
      <div class="right">
        <RouterLink to="/search" class="iconfont icon-sousuo search"></RouterLink>
        <div class="iconfont icon-gouwuche shopping"></div>
      </div>
    </div>

    <!-- 轮播 -->
    <van-swipe style="margin-top: 40px;" class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in pric" :key="item.id" >
        <img class="Image5" :src="item.imgUrl" alt="" >
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>


    <!-- Main -->
    <div class="Main">
      <!-- 顶部 -->
      <div class="MainHeader">
        <span class="MainHeader1">{{ skuInfo.price }}</span>
        <span class="MainHeader2">
          <span>到手<span style="font-weight: 600;font-size:15px;">￥199</span> </span> 4.7 20点开始
        </span>
      </div>
      <div class="baseInfo">
        <div class="info">
          <div class="name">{{ skuInfo.skuName }}</div>
          <div class="simpleBrandInfo">
            <span class="preLogo preLogo1">自营</span>
            <img class="brandLogo" src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png" alt="">
            <span class="title">网易严选</span>
          </div>
        </div>
        <div style="margin-top: 10px;">推荐理由</div>
        <ul class="angleTop">
          <li><span class="angleTop1">1</span> 真毛内里 保暖舒适</li>
          <li><span class="angleTop1">2</span> 娃娃鞋头 一萌到底</li>
          <li><span class="angleTop1">3</span> 豆豆鞋底 耐磨防滑</li>
        </ul>
      </div>
      <div class="comment single-line">
        <div class="num">99.6%</div>
        <span class="com">好评率</span>
        <span class="u-icon u-address-right">></span>
      </div>
    </div>

    <div style="border: 5px solid #f4f4f4;"></div>

    <!-- 列表 -->
    <div class="tm-list  noLastBorder">
      <div class="tm-list">
        <span class="tm-list1">领卷:</span>
        <span class="iconfont icon-ziyuan"><span style="color: black;">每满200-30</span></span>
        <span class="tm-list2">></span>
      </div>
      <div class="tm-list">
        <span class="tm-list1">领卷:</span>
        <span class="iconfont icon-ziyuan"><span style="color: black;">每满200-30</span></span>
        <span class="tm-list2">></span>
      </div>
      <div class="tm-list">
        <span class="tm-list1">领卷:</span>
        <span class="iconfont icon-ziyuan"><span style="color: black;">每满200-30</span></span>
        <span class="tm-list2">></span>
      </div>
    </div>
    <!-- 边框 -->
    <div style="border: 5px solid #f4f4f4;"></div>


    <!-- 列表2 -->
    <div class="tm-list  noLastBorder">
      <!-- 请选择地区 -->
      <van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区" @click="show = true" />
      <van-popup v-model:show="show" round position="bottom">
        <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false"
          @finish="onFinish" />
      </van-popup>

      <div class="tm-list" @click="changeState">
        <span class="tm-list1">请选择规格数量</span>
        <span class="tm-list2">></span>
      </div>
      <van-popup closeable v-model:show="showBottom" position="bottom" :style="{ height: '70%' }">
        <div class="bobotom">
          <div class="bobotomItem">
            <img class="bobotomImage" :src="skuInfo.skuDefaultImg"
              alt="">
            <div class="bobotomItemRight">
              <div class="bobotomItemRight1">特价</div>
              <div class="bobotomItemRight2">价格:{{ skuInfo.price }}</div>
              <div class="bobotomItemRight3">已选择：请选择规格数量</div>
            </div>
          </div>
          <!-- 尺码 -->
          <div class="span1">尺码助手 ></div>

          <!-- 颜色 -->
          <div class="seaectColor" v-for="item in skuSaleAttrValueList" :key="item.id">
            <div class="seaectColorText">{{ item.saleAttrName }}</div>
            <ul class="seaectColorUl">
              <li class="seaectColorLi">{{ item.saleAttrValueName }}</li>
            </ul>
          </div>


          <!-- 数量 -->
          <div class="numD">
            <div class="numDText">数量</div>
            <van-stepper v-model="value" input-width="40px" button-size="32px" />
          </div>
        </div>
      </van-popup>

      <div class="tm-list">
        <span class="tm-list1">备注：</span>
        <span class="iconfont"><span class="pana" style="color: black;">此款面料为牛猄贴合真皮毛一体内里</span></span>
        <span class="tm-list2">></span>
      </div>

      <div class="tm-list">
        <span class="tm-list1">服务:</span>
        <span class="iconfont"><span class="pana" style="color: black;">此款面料为牛猄贴合真皮毛一体内里</span></span>
        <span class="tm-list2">></span>
      </div>

    </div>

    <!-- 边框 -->
    <div style="border: 5px solid #f4f4f4;"></div>

    <van-swipe class="my-swipe cc" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in pric" :key="item.id" >
        <img class="Image4" :src="item.imgUrl" alt="" >
      </van-swipe-item>
    </van-swipe>

    <div class="bootom">
      <div class="bootom1 iconfont icon-kefu"></div>
      <div class="bootom2">立即购买</div>
      <div class="bootom3" @click="goShopCard">加入购物车</div>
    </div>
    <div style="height: 50px;"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Detail'
})
</script>
<script lang="ts" setup>

import { ref,onMounted } from 'vue'

import { useCascaderAreaData } from '@vant/area-data';

import { useRoute } from 'vue-router'

import {getShopDetail,type skuImageList,type skuSaleAttrValueList,getShopList} from '@/api/shoGory'

import { showNotify } from 'vant';

const roter = useRoute()

const {id} = roter.query

onMounted(()=>{
  result()
})

const pric = ref<skuImageList[]>([])

const skuInfo = ref({
  createTime: '',
  id: 0,
  spuId: 0,
  price: 0,
  skuName: '',
  skuDesc: '',
  weight: 0,
  tmId: 0,
  category3Id: 0,
  skuDefaultImg: '',
  isSale: 0,
})

// 颜色
const skuSaleAttrValueList = ref<skuSaleAttrValueList[]>([])

const result = async()=>{
  try {
    const resul = await getShopDetail(id as unknown as number)

    pric.value = resul.data.skuInfo.skuImageList

    skuInfo.value = resul.data.skuInfo

    skuSaleAttrValueList.value = resul.data.skuInfo.skuSaleAttrValueList

    categoryView.value = resul.data.categoryView

    console.log(skuSaleAttrValueList)

    console.log(resul)
  } catch (error) {
    return Promise.reject(error)
  }
}
// 商品详情
const categoryView  = ref({
  id: 0,
  category1Id: 0,
  category1Name: '',
  category2Id: 0,
  category2Name: '',
  category3Id: 0,
  category3Name: ''
})

const value = ref(1)

const showBottom = ref(false)

const show = ref(false);

const fieldValue = ref('');

const cascaderValue = ref('');

const options = useCascaderAreaData();

const onFinish = ({ selectedOptions }:any) => {
  show.value = false;
  fieldValue.value = selectedOptions.map((option: any) => option.text).join('/');
};

// 点击改变状态
const changeState = () => {
  showBottom.value = true
}

const state = () => {
  showBottom.value = false
}

// 点击加入购物车
const goShopCard = async()=>{
  try {
    const result = await getShopList(id as unknown as number,value.value)
    if(result.code === 200){
    showNotify({ type: 'primary', message: '添加购物车成功', background:'skyblue' });
    }
  } catch (error) {
    showNotify({ type: 'primary', message: '添加购物车失败',background:'red' });
  }
  
}
</script>

<style lang="less" scoped>
.bobotomX {
  font-size: 20px;
  position: absolute;
  right: 5px;
  top: 5px;
}

.bobotom {
  .numD {
    width: 300px;
    margin-left: 20px;

    .numDText {
      font-size: 13px;
      color: black;
      margin-top: 10px;
    }

  }

  .seaectText {
    margin-top: 10px;
    width: 300px;
    margin-left: 20px;

    .seaectColorTex {
      color: black;
      font-size: 13px;
    }

    .seaectColorU {
      display: flex;
      flex-wrap: wrap;
      margin-left: -5px;

      .seaectColorL {
        width: 30px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        border-radius: 3px;
        margin-left: 5px;
      }
    }
  }

  .seaectColor {
    margin-top: 10px;
    width: 300px;
    margin-left: 20px;

    .seaectColorText {
      color: black;
      font-size: 13px;
    }

    .seaectColorUl {
      display: flex;
      justify-content: space-between;

      .seaectColorLi {
        border: 1px solid;
        width: 59px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        border-radius: 3px;
      }
    }
  }

  position: relative;

  .span1 {
    width: 100px;
    font-size: 17px;
    color: red;
    margin-left: 20px;
    margin-top: 15px;
  }

  .bobotomItem {

    display: flex;
    margin-top: 27px;
    width: 293px;
    height: 110px;
    margin-left: 20px;
    justify-content: space-between;

    .bobotomImage {
      width: 110px;
      height: 110px;
    }

    .bobotomItemRight {
      .bobotomItemRight1 {
        border-radius: 10px;
        background-color: #f48f18;
        color: white;
        line-height: 20px;
        text-align: center;
        width: 32px;
        height: 20px;
        border: 1px solid;
      }

      .bobotomItemRight2 {
        color: red;
        font-size: 18px;
      }

      .bobotomItemRight3 {
        font-size: 16px;
        color: black;
      }
    }

  }
}

.Header {
  height: 45px;
  display: flex;
  background-color: #fafafa;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #e4e4e4;
  color: #747474;
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;

  .fontSize {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    letter-spacing: 2px;
  }

  .home {
    font-size: 25px;
    margin-left: 10px;
    margin-right: 30px;
  }

  .right {
    display: flex;
    margin-right: 10px;

    .search {
      font-size: 25px;
    }

    .shopping {
      font-size: 25px;
      margin-left: 5px;

    }
  }

}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  // line-height: 423px;
  text-align: center;
  background-color: #39a9ed;
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.Main {
  .angleTop {
    width: 343px;
    height: 85px;
    padding-top: 15px;
    font-size: 15px;
    color: black;
    background-color: #fafafa;

    .angleTop1 {
      border: 1px solid red;
      border-radius: 75%;
      display: inline-block;
      width: 13px;
      height: 12px;
      line-height: 12px;
      text-align: center;
      color: red;
      font-weight: 600;
      margin: 5px 0;
    }
  }

  position: relative;

  .comment {
    height: 38px;
    width: 64px;
    position: absolute;
    top: 58px;
    right: 0;

    .num {
      color: red;
      font-size: 13px;
      font-weight: 600;
    }

    .com {
      font-size: 12px;
    }

    .u-icon {
      position: absolute;
      right: 0;
      top: 10px;
    }
  }

  .MainHeader {
    width: 300px;
    margin: auto;
    margin-top: 20px;
    position: relative;

    .MainHeader1 {
      font-size: 25px;
      color: red;
      font-weight: 600;
    }

    .MainHeader2 {
      border: 1px solid;
      border-radius: 25px;
      background-color: #ffe9eb;
      display: inline-block;
      height: 25px;
      line-height: 25px;
      color: red;
      position: absolute;
      top: 6px;
      margin-left: 5px;
    }
  }
}

.baseInfo {
  margin-top: 12px;
  margin-left: 30px;

  .info {
    .name {
      font-size: 19px;
      font-weight: 600;
      color: black;
    }

    .simpleBrandInfo {
      position: relative;

      .preLogo {
        border: 1px solid;
        background-color: #ec373e;
        border-radius: 25px;
        color: white;
        display: inline-block;
        width: 35px;
        text-align: center;
      }

      .brandLogo {
        width: 15px;
        height: 15px;
        font-weight: 600;
        position: absolute;
        top: 8px;
      }

      .title {
        margin-left: 20px;
        margin-top: 5px;
        display: inline-block;
      }
    }
  }
}

.noLastBorder {
  .tm-list {
    border-bottom: 1px solid #e1e1e1;
    width: 354px;
    height: 60px;
    line-height: 60px;
    position: relative;
    padding-left: 20px;
    color: black;
  }

  .tm-list1 {
    font-size: 12px;
    color: black;

  }

  .tm-list2 {
    font-size: 19px;
    position: absolute;
    right: 20px;

  }

  .iconfont {
    color: red;
  }
}

.bootom {
  display: flex;
  height: 49px;
  position: fixed;
  bottom: 0;
  z-index: 999;
  background-color: white;

  .bootom1 {
    width: 89px;
    border: 1px solid;
    font-size: 30px;
    text-align: center;
    line-height: 62px;
  }

  .bootom2 {
    width: 168px;
    border: 1px solid;
    line-height: 62px;
    text-align: center;
    font-size: 17px;
  }

  .bootom3 {
    width: 135px;
    line-height: 62px;
    text-align: center;
    background: red;
    color: white;
    font-size: 17px;
  }
}

.pana {
  font-size: 13px;
}

.cc {
  height: 100px;
}

.Image5{
    width: 375px;
    height: 375px;
  }
  .Image4{
    width: 375px;
    height: 100px;
  }
</style>
